<script setup lang='ts'>
import {nextTick, reactive, ref} from 'vue';
import {financeApi} from '@/api/controller';
import {ToastSuccess, Toastloading, allNumber} from '@/utils/public';

const dataForm = ref()
const $emit = defineEmits(['updateList'])
const action = reactive({
  dialogFormVisible: false,
  disabled: false,
})

interface formQuert {
  rule_id?: number;
  price: number;
  diamond_amount: number;
  diamond_desc: string;
  plat_type: 1 | 2 | 3 | 4;
}

let form = ref({
  rule_id: 0,
  price: 0,
  diamond_amount: 0,
  diamond_desc: '',
  plat_type: 2
})
const formRules = {
  price: [
    {required: true, trigger: 'blur', message: '价格不可为空'},
    {pattern: /^\d+(\.\d{1,2})?$/, message: '不可超过两位小数', trigger: 'blur'}
  ],
  diamond_amount: [
    {required: true, trigger: 'blur', message: '钻石数量不可为空'},
    {pattern: /^[0-9]*$/, message: '必须是整数', trigger: 'blur'}
  ]
}
const handleSubmit = () => {
  dataForm.value.validate((valid: any) => {
    if (!valid) return
    const loading = Toastloading()
    let newForm:any = {...form.value}
    newForm.price *= 100;
    financeApi.updatePayRule(newForm).then(() => {
      loading.close()
      ToastSuccess('更新成功！')
      $emit('updateList')
      closeDialog()
    }).catch(() => {
      loading.close()
    })
  })
}
const openDialog = (row: any) => {
  action.dialogFormVisible = true
  form.value = {...row}
  console.log(form)
}
const closeDialog = () => {
  nextTick(() => {
    dataForm.value.clearValidate();
  });
  action.dialogFormVisible = false
}
defineExpose({
  openDialog
})
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="52%"
      title="扣除用户金币">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item label="价格" prop="price">
          <el-input
            v-model="form.price"
            type="number"
          />
        </el-form-item>
        <el-form-item label="钻石" prop="diamond_amount">
          <el-input
            v-model="form.diamond_amount"
            type="number"
          />
        </el-form-item>
        <el-form-item style="display: none;" label="描述" prop="diamond_desc">
          <el-input
            v-model="form.diamond_desc"
            type="text"
            placeholder="请输入描述"
            maxlength="8"
          />
        </el-form-item>
        <el-form-item label="平台类型" prop="plat_type">
          <el-select v-model="form.plat_type" placeholder="请选择平台类型">
            <el-option :value="1" label="苹果"/>
            <el-option :value="2" label="安卓"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
